<template>
    <div class="marsk" key="div" v-if='visible'>
        <div class="modal-wrap">
            <div class="title">
                <slot name="title">充值提示</slot>
            </div>
            <div class="body">
                <slot name="body">是否充值成VVVVip?</slot>
            </div>
            <div class="footer">
                <button class="del" @click="cancel">取消</button>
                <button class="confirm" @click="confirm">确定</button>
            </div>
        </div>
    </div>
</template>
<script>
//封装组件的流程 slot props emit
//1.编写组件的结构
//2.设计组件

//我们的业务需求
//1.需要一个属性来控制 modal的显示和隐藏 通过visible来控制
//2.组件title body部分 内容要变的灵活 
//3.点击按钮之后 需要关闭模态框 点击按钮之后需要触发额外的业务逻辑
//4.点击确定按钮或者取消按钮 需要给用户提供添加自己代码的机会
//通过事件 confirm事件 cancel事件来触发 确定和取消按钮对应的业务逻辑

// 1.通过某种方式来控制显示和隐藏,通过visible来控制组件的显示和隐藏
// 2.标题部分 body部分的内容可以灵活的变更
// 3.点击取消或者确定的时候，回调函数，然后让用户在这些函数中添加自己的代码逻辑
export default {
    props:{
        visible:{
            type: Boolean,
            default(){
                return false
            }
        }
    },
    methods: {
        cancel(){   // 点击取消按钮
            this.$emit('cancel')
        },
        confirm(){  // 点击确定按钮
            this.$emit('ok')
        }
    }
}
</script>
<style scoped>
    h1,h2,h3{
        margin: 0;
    }
    .marsk {
        background-color: rgba(0, 0, 0, .6);
        position: fixed;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .modal-wrap {
        border-radius: 10px;
        background-color: #fff;
        width: 400px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        /* border: 1px solid #ccc; */
    }

    .marsk .title,
    .marsk .footer,
    .marsk .body {
        margin: 20px 0
    }

    button {
        outline: none;
        border: 0;
        width: 100px;
        height: 40px;
        background: linear-gradient(90deg, #1596fb, #002dff);
        border-radius: .28571429rem;
        /* display: block; */

        color: #fff;
        cursor: pointer;
    }

    .footer {
        width: 100%;
        text-align: center;
    }

    .footer button {
        margin-left: 20px
    }

    .del {
        background-image: linear-gradient(90deg, #fb1565, #ff00cc);
    }
    button:hover {
        background-image: linear-gradient(90deg, #aebaac, #57da23);
    }
</style>